﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="EmployeePage.aspx.cs" Inherits="FBKPI.Pages.EmployeePage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");
            $("#divdetail").hide();
            $("#divdetail").dialog({
                title: '<span class="header-text">Employee Form</span>',
                autoOpen: false,
                width: 900,
                height: 380,
                modal: true,
                resizable: false
            });
            $("#divimport").hide();
            $("#divimport").dialog({
                title: '<span class="header-text">Import Employee</span>',
                autoOpen: false,
                width: 450,
                height: 250,
                modal: true,
                resizable: false
            });


            //datatable section
            $("#EmployeeTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/EmployeeSerializer.ashx?CurrUser=" + $("#txt_user").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
             {
                 "mData": "ID", "sWidth": "5%"
             }, {
                 "mData": "No", "sWidth": "3%"
             },
             {
                 "mData": "NIK", "sWidth": "10%"
             }, {
                 "mData": "FirstName"
             }, {
                 "mData": "LastName"
             }, {
                 "mData": "SubBranch"
             }, {
                 "mData": "Department"
             }, {
                 "mData": "Section"
             }, {
                 "mData": "SubSection"
             }, {
                 "mData": "JobPosition","sWidth": "20%"
             }, {
                 "mData": "Superior", "sWidth": "20%"
             }, {
                 "mData": "JobTitle", "sWidth": "8%"
             }, {
                 "mData": "isAdmin", "sWidth": "7%"
             }, {
                 "mData": "isLock", "sWidth": "7%"
             }, {
                 "mData": "isActive", "sWidth": "7%"
             }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        //return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\">Edit</a>&nbsp;/<a href=\"#\" onclick=\"OnDelete('" + oObj.aData["ID"] + "')\">Delete</a>";
                        return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\"><img src='../images/icon_edit.png' title='Edit Data' /></a>&nbsp;<a href=\"#\" onclick=\"OnDelete('" + oObj.aData["ID"] + "')\"><img src='../images/icon_delete.png' title='Delete Data' /></a>";
                    },
                    "aTargets": [0]
                }

            , {
                "fnRender": function (oObj) {
                    if (oObj.aData["isAdmin"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [12]
            },

              {
                  "fnRender": function (oObj) {
                      if (oObj.aData["isLock"] == 'True') {
                          return "<img src='../images/check.png' />"
                      } else {
                          return "<img src='../images/cross.png' />"
                      }
                  },
                  "aTargets": [13]
              },

              {
                  "fnRender": function (oObj) {
                     
                      if (oObj.aData["isActive"] == 'True') {
                          return "<img src='../images/check.png' />"
                      } else {
                          return "<img src='../images/cross.png' />"
                      }
                  },
                  "aTargets": [14]
              },

                             {
                                 "bVisible": false,
                                 "aTargets": [4, 7, 8,5 ,11, 12,13,14]
                             },

            {
            "sClass": "center",
            "aTargets": [0, 1, 11, 13, 14]
        }]
            });

            //mark selected row
            $('body').on("click", '#EmployeeTable tbody tr', function () {
                $('#EmployeeTable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            $("#EmployeeTable_length label").after('&nbsp;<button id=\"btnAddNew\" class="button add" style="right: 0px;" onclick=\'OnDetail(0);return false;\'>New Record</button>&nbsp;<button id=\"btnImportExcel\" class="button" style="right: 0px;" onclick=\'ImportExcel("employee");return false;\'>Import</button>'); //&nbsp;<button id=\"btnImportExcel\" class="button" style="right: 0px;" onclick=\'ImportExcel("employee");return false;\'>Import</button>
            //--------------------end of datatable section-----------------------------------------

            OnDetail = function (code) {
                LoadForm('EmployeeForm.aspx?ID=' + code, function (result) {
                    $("#divdetail").html(result);
                    $("#divdetail").dialog('open');
                });
                return false;
            }

            OnDelete = function (code) {
                $.msgBox.confirm("Benar data akan dihapus ?", function () {
                    var param = "?";
                    param = param + "action=delete";
                    param = param + "&ID=" + code;
                    param = param + "&CurrUser=" + $("#txt_user").val();
                    ProcessRequest("EmployeeHandler.ashx" + param, "#divdetail", "#EmployeeTable");
                    return false;
                }, false);

                return false;
            }

            ImportExcel = function (mode) {
                //var winFeature = "dialogHeight:200;dialogWidth:500;center:yes;resizeable:no;scroll:yes";
                //window.showModalDialog("../Tools/ImportExcel/ImportExcel.aspx?mode=" + mode + "&User=" + $("#txt_user").val(), null, winFeature);

                var left = (screen.width / 2) - (500 / 2);
                var top = (screen.height / 2) - (200 / 2);
                var targetWin = window.open("../Tools/ImportExcel/ImportExcel.aspx?mode=" + mode + "&User=" + $("#txt_user").val(), "myPop1", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + 500 + ', height=' + 200 + ', top=' + top + ', left=' + left)

            }
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div id="employeetable">
            <div>
                <div class="customPageHeader">
                    <span class="customPageTitle">Employee</span>
                </div>
                <div class="ui-widget-content">
                    <table cellpadding="0" cellspacing="0" class="display" id="EmployeeTable">
                        <thead>
                            <tr>
                                <th>
                                    Action
                                </th>
                                <th>
                                    No
                                </th>
                                <th>
                                    NIK
                                </th>
                                <th>
                                     Name
                                </th>
                                <th>
                                    Last Name
                                </th>
                                <th>
                                    Sub Branch
                                </th>
                                <th>
                                    Department
                                </th>
                                <th>
                                    Section
                                </th>
                                <th>
                                    Sub Section
                                </th>
                                <th>
                                    Job Position
                                </th>
                                <th>
                                    Superior
                                </th>
                                <th>
                                    Job Title
                                </th>
                                 <th>
                                    is Admin
                                </th>
                                <th>
                                    is Lock
                                </th>
                                <th>
                                    is Active
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <br />
        </div>
        <div id="divdetail">
        </div>
    </div>
</asp:Content>
